<template>
  <div v-dialogDrag :class="`win-index-wrapper ${isDesignView ? 'win-index-wrapper-designview' : ''} win-index-wrapper-${widgetInstanceId}`">
    <Transition name="win-index-wrapper-fade">
      <!-- 请确保${widgetInstanceId}类名在第一个，用于移动弹窗时发出事件 -->
      <div
        v-show="isShow"
        :class="`
          ${widgetInstanceId}
          winIndex
          ${visualThemeClassName}
          extStyle_${widgetInstanceId}
        `"
        :style="{...getCssStyle('popBox'), ...winStyle}"
      >
        <div
          v-if="!config.config.property.isHideTopABar || isDesignViewNew"
          :class="['title', `${isTitleSignVisiable ? 'relativePos' : ''}`]"
          :style="{ ...getCssStyle('title'), ...getCssStyle({ height: 40 }) }"
        >
          <span
            v-if="isTitleSignVisiable"
            class="sign"
            :style="getCssStyle({
              marginLeft: signMarginLeft,
              backgroundColor: verticalLineBackgroundColor,
            })"
          ></span>
          <span :style="getCssStyle({ marginLeft: 12 })">{{ isTitleFixed ? title : variableTitle }}</span>
          <i
            class="close_btn"
            :style="getCssStyle({ marginRight: 12 })"
            @click="closeWin()"
          >×</i>
        </div>
        <div
          class="centerList"
          :class="{ isBorder: isDesignViewNew }"
          :style="getCssStyle('popBox')"
        >
          <xvue-wigetContainer
            v-if="isXvueEnv"
            :is-design-view="isDesignViewNew"
            :widget-instance-id="wcId"
            :w="widgetContainerWidth"
            :h="widgetContainerHeight"
            widget-name="xvue-wigetContainer"
            :parent-id="widgetInstanceId"
            :keepChild="true"
          ></xvue-wigetContainer>
        </div>
      </div>
    </Transition>
  </div>
</template>
<script>
import baseFunctions from '@/mixin/base-functions.js';
import { convertValue } from '@/utils/util.js';
import { nextTick } from 'vue';
import dfCssStyle from '../config/cssStyle-default.js';

export default {
  mixins: [baseFunctions],
  props: [
    'isDesignView',
    'parentId',
    'widgetId',
    'widgetInstanceId',
    'widgetName',
    'w',
    'h',
    'layout',
    'title',
    'isTitleFixed',
    'variableTitle',
    'config',
    'winStyle',
    'dlgAnimation',
  ],
  emits: ['closeWin'],
  data() {
    return {
      widgetContainerWidth: 0,
      widgetContainerHeight: 1200,
      dfCssStyle,
      isShow: false,
    };
  },
  computed: {
    isXvueEnv() {
      // 是否在xvue项目环境
      if (window._xvueStore) {
        return true;
      }
      return false;
    },
    isDesignViewNew() {
      if (this.isDesignView === true || this.isDesignView === false) {
        return this.isDesignView;
      }
      return true;
    },
    wcId() {
      // 内部的子container id
      const wcId = `${this.widgetInstanceId}_widgetContainer`;
      return wcId;
    },
    isTitleSignVisiable() {
      return this.config?.config?.property?.isTitleSignVisiable;
    },
    signMarginLeft() {
      return this.config?.config?.property?.signMarginLeft;
    },
    verticalLineBackgroundColor() {
      return this.config?.config?.property?.verticalLineBackgroundColor;
    },
    dialogBackgroundColor() {
      return this.config?.config?.property?.dialogBackgroundColor;
    },
  },
  watch: {
    w() {
      this.resetWidgetContainerSize();
    },
    h() {
      this.resetWidgetContainerSize();
    },
  },
  mounted() {
    nextTick(() => {
      this.resetWidgetContainerSize();
    });
    if (this.dlgAnimation) {
      setTimeout(()=>{
        this.isShow = true;
      }, 200);
    } else {
      this.isShow = true;
    }
  },
  methods: {
    resetWidgetContainerSize() {
      let titleHeight = 40;
      if (!this.isDesignViewNew) {
        titleHeight = convertValue(40, 0, 'h');
      }
      this.widgetContainerHeight = this.h - titleHeight;
      this.widgetContainerWidth = this.w;
    },
    closeWin() {
      this.isShow = false;
      if (this.dlgAnimation) {
        setTimeout(()=>{
          this.$emit('closeWin');
        }, 400);
      } else {
        this.$emit('closeWin');
      }
    },
  },
};
</script>
<style lang="less" scoped>
.win-index-wrapper-designview {
  width: 100%;
  height: 100%;
  position: relative !important;
}
.win-index-wrapper {
  z-index: 2005;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  transition: all 0.3s;
  word-break: normal; // 必须加这个，不然容器内的文字会受el-dialog影响换行
  background-color: rgba(0,0,0,0.5);
  .winIndex {
    width: 100%;
    height: 100%;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      text-align: left;
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &.relativePos {
        position: relative;
      }
      // 标题竖线统一样式
      .sign {
        display: inline-block;
        position: absolute;
        width: 4px;
        height: 16px;
        background-color: #409eff;
        left: 0;
      }
      span {
        margin-left: 12px;
      }
      i {
        margin-right: 12px;
        cursor: pointer;
        font-size: 18px;
        font-style: normal;
        font-family: serif;
      }
    }
    .centerList {
      width: 100%;
      border: none;
      flex: 1;
      overflow: hidden;
    }
    .isBorder {
      outline: rgb(135, 206, 250) solid 1px;
      transition: all 0.35s ease 0s;
      animation: 1.5s linear 0s infinite normal none running waverForTabContainer;
    }
  }
}
</style>
